import { Modal } from 'ant-design-vue'
import { defineComponent, nextTick, ref } from 'vue'

import { userApi } from '@/apis'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { TABLE_FORMAT } from '@/constants'

import styles from './detailDialog.module.css'

export default defineComponent({
  name: 'DetailDialog',
  setup() {
    const showDialog = ref(false)
    const tableRef = ref({} as ProTableRef)
    const id = ref<number>()
    const tableConfig = ref<ProTableProps>({
      fixedHeight: true,
      options: {
        align: 'center',
        proxyConfig: {
          autoLoad: false,
          props: {
            result: 'dataList',
            total: 'page.totalCount'
          },
          ajax: {
            query: async ({ page }) => {
              const data = await userApi.getScoreDetail({
                pageParameter: {
                  pageSize: page.pageSize,
                  currentPage: page.currentPage
                },
                id: id.value
              })
              return data
            }
          }
        },
        columns: [
          {
            title: '变更时间',
            field: 'sendTime',
            formatter: TABLE_FORMAT.Date
          },
          {
            title: '变动积分',
            field: 'point'
          },
          {
            title: '业务类型',
            field: 'typeName'
          },
          {
            title: '操作员',
            field: 'operator'
          },
          {
            title: '备注',
            field: 'reason'
          }
        ],
        pagerConfig: {
          pageSize: 10
        }
      }
    })
    function openDialog(userId: number) {
      showDialog.value = true
      id.value = userId
      nextTick(() => {
        tableRef.value.table.commitProxy('query')
      })
    }
    return {
      showDialog,
      tableRef,
      tableConfig,
      openDialog
    }
  },
  render() {
    return (
      <Modal
        v-model:visible={this.showDialog}
        footer={null}
        width={800}
        wrapClassName={styles.scoreDialog}
      >
        <ProTable ref="tableRef" {...this.tableConfig} />
      </Modal>
    )
  }
})
